<template>
  <div class="bg-white w-full h-full">
    <div class="text-[#6F6F6F] text-[14px] ml-3">团队数据</div>
    <div class="text-[#999999] text-[12px] flex justify-end mr-3">
      <div class="cursor-pointer mr-1" @click="() => getDataList(getTodayRange())">今日</div>
      <div class="cursor-pointer mr-1" @click="() => getDataList(getSubtractDaysRange(3))">3日</div>
      <div class="cursor-pointer mr-1" @click="() => getDataList(getSubtractDaysRange(7))">7日</div>
      <div class="cursor-pointer mr-1" @click="() => getDataList(getCurrentMonthRange())">本月</div>
      <div class="cursor-pointer mr-1" @click="() => getDataList(getLast30DaysRange())">近30天</div>
      <Popover v-model:open="popoverVisible" placement="bottomRight" trigger="click">
        <template #content>
          <Space direction="vertical" style="width: 100%">
            <DatePicker
              v-model:value="customDateRange.start"
              :disabled-date="disabledDate"
              class="w-full"
              size="small"
              placement="bottomRight"
              placeholder="开始日期"
            ></DatePicker>
            <DatePicker
              v-model:value="customDateRange.end"
              :disabled-date="disabledEndDate"
              :status="endStatus"
              class="w-full"
              size="small"
              placement="bottomRight"
              placeholder="结束日期"
            ></DatePicker>
          </Space>
        </template>
        <template #title>
          <span>自定义日期</span>
          <AButton
            :disabled="btnStatus"
            class="float-right"
            size="small"
            @click="
              async () => {
                await getDataList({
                  start: formatDate(customDateRange.start!.startOf('day')),
                  end: formatDate(customDateRange.end!.endOf('day'))
                });
                popoverVisible = false;
              }
            "
            >查询</AButton
          >
        </template>
        <div class="cursor-pointer">自定义</div>
      </Popover>
    </div>
    <div class="overflow-y-auto px-2 mt-2">
      <div
        class="min-w-[260px] grid grid-cols-[minmax(auto,5%)minmax(35px,20%)minmax(78px,22%)minmax(42px,20%)minmax(35px,15%)minmax(35px,15%)] gap-1 text-[#000000] text-[12px]"
      >
        <div></div>
        <div class="font-bold text-left">姓名</div>
        <div class="font-bold text-center">手机</div>
        <div class="font-bold text-center">任务完成</div>
        <div class="font-bold text-center">作品数</div>
        <div class="font-bold text-center mb-1">排名</div>
        <template v-for="(item, index) in data" :key="index">
          <div class="text-right overflow-hidden text-ellipsis text-nowrap">
            {{ (item?.sort ?? '1') + '.' }}
          </div>
          <div class="text-left overflow-hidden text-ellipsis text-nowrap">
            {{ item.realname }}
          </div>
          <div class="text-center overflow-hidden text-ellipsis text-nowrap">
            {{ item.mobile }}
          </div>
          <div class="text-center overflow-hidden text-ellipsis text-nowrap">
            {{ item.finished }}
          </div>
          <div class="text-center overflow-hidden text-ellipsis text-nowrap">
            {{ item.works }}
          </div>
          <div class="text-center overflow-hidden text-ellipsis text-nowrap">
            {{ item.sort }}
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getTeamListApi } from '@main/service/team';
import type { TeamManageReq, TeamManageRes } from '@main/service/team/type';
import type { DateRange } from '@main/utils/date';
import {
  formatDate,
  getTodayRange,
  getSubtractDaysRange,
  getCurrentMonthRange,
  getLast30DaysRange
} from '@main/utils/date';
import dayjs, { Dayjs } from 'dayjs';
import { ref, onMounted, reactive, computed } from 'vue';
import { Popover, Space, DatePicker } from 'ant-design-vue';
interface DataItem extends TeamManageRes {}
interface DayjsDateRange {
  start?: Dayjs;
  end?: Dayjs;
}
const popoverVisible = ref(false);
const containerRef = ref();
const data = ref<DataItem[]>([]);
const customDateRange: DayjsDateRange = reactive({});
const endStatus = computed(() =>
  customDateRange.start &&
  customDateRange.end &&
  dayjs(customDateRange.start).toDate() >= dayjs(customDateRange.end).toDate()
    ? 'error'
    : ''
);
const btnStatus = computed(() =>
  customDateRange.start && customDateRange.end && endStatus.value == '' ? false : true
);

const getDataList = async (dateRange: DateRange) => {
  const params: TeamManageReq = {
    date_type: 6,
    begin_date: dateRange.start,
    end_date: dateRange.end
  };
  const res = await getTeamListApi(params);
  data.value = res;
};

onMounted(() => {
  getDataList(getTodayRange());
});

const disabledDate = (current: Dayjs) => {
  return current && current > dayjs().endOf('day');
};
const disabledEndDate = (current: Dayjs) => {
  return current && (current > dayjs().endOf('day') || current < dayjs(customDateRange.start));
};
</script>
